<template>
<div class="view-ExampleList">
	<!-- 查询-查询条件 -->
    <div class="search-mod">
        <div class="s-item">
            <div class="s-item-l">
                <span>姓名</span>
            </div>
            <div class="s-item-r">
                <el-input v-model="condiData.name" placeholder="请输入"></el-input>
            </div>
        </div>
        <div class="s-item">
            <div class="s-item-l">
                <span>性别</span>
            </div>
            <div class="s-item-r">
                <el-select v-model="condiData.sex" style='width:100%;'>
                    <el-option v-for="data in sexList" :value="data.value" :key="data.value">{{ data.label }}</el-option>
                </el-select>
            </div>
        </div>
        <div class="s-item">
            <div class="s-item-l">
                <span>日期</span>
            </div>
            <div class="s-item-r">
                <el-date-picker type="date" :editable="false" placeholder="请选择" style='width:100%;' v-model="condiData.date"></el-date-picker>
            </div>
        </div>
        <div class="s-item-btns">
            <div class="s-btns-l">
                <el-button type='primary' @click='clickAddNListItem'>新增</el-button>
            </div>
            <div class="s-btns-r">
                <el-button type='primary' @click='searchList'>查询</el-button>
                <el-button type='primary' @click='resetSearch'>重置</el-button>
            </div>
        </div>
    </div>

    <!-- 查询-列表 -->
    <div class="list-mod">
        <el-table :data="listData">
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
                <template #default="scope">
                    <el-button @click="clickDetaListItem(scope.row)" type="text">{{scope.row.name}}</el-button>
                </template>
            </el-table-column>
            <el-table-column
                prop="sex"
                label="性别"
                width="180">
            </el-table-column>
            <el-table-column
                prop="date"
                label="时间">
            </el-table-column>
            <el-table-column
                label="操作">
				<template #default="scope">
					<el-button @click="clickEditListItem(scope.row)" type="text">编辑</el-button>
                    <el-button @click="clickDeleListItem(scope.row)" type="text">删除</el-button>
				</template>
            </el-table-column>
        </el-table>
        <!-- 查询-分页 -->
		<el-pagination
			@size-change="listPageSizeChange"
			@current-change="listPageChange"
			:current-page="pageData.pageCurrent"
			:page-sizes="[100, 200, 300, 400]"
			:page-size="pageData.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="400">
		</el-pagination>

        <ExampleItemDialog ref='exampleItemDialogRef' :isEdit='signItemOperaObj.isEdit' :isReadonly='signItemOperaObj.isReadonly' @hideDialog='readloadData'></ExampleItemDialog>

    </div>
</div>
</template>
<script>
import { ref, onMounted, reactive, toRefs, getCurrentInstance } from "vue";
import { get } from "@/common/service.js";
import ExampleItemDialog from '@/tags/ExampleItemDialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
	name: 'ExampleList2',
    components: {
        ExampleItemDialog,
    },
	setup () {
        const exampleItemDialogRef = ref(null);
		const { proxy } = getCurrentInstance();
		const mainData = reactive({
			listData: [],
			// 查询-查询条件
            condiData: {
                name: '',
                sex: '',
                date: ''
            },
            // 下拉列表-性别
            sexList: [{
                value: '1',
                label: '男'
            },{
                value: '2',
                label: '女'
            }],
            // 查询-分页数据
            pageData: {
                total: 0,
                pageSize: 10,
                pageCurrent: 1
            },
            // 当前正在操作的数据
            signItemOperaObj: {
                isEdit: false,
                isReadonly: false,
            },
		});
		// 查询功能--重置
		const resetSearch = () => {
			mainData.condiData.name = '';
			mainData.condiData.sex = '';
			mainData.condiData.date = '';
		};
		// 列表查询
		const searchList = async () => {
			let params = {
				name: mainData.condiData.name,
                sex: mainData.condiData.sex,
                date: mainData.condiData.date,
                pageCurrent: mainData.pageData.pageCurrent,
                pageSize: mainData.pageData.pageSize
			};
			let res = await get(proxy.$Api('queryExampleList'), params);
			if (res) {
				mainData.listData = res.data.dataList;
			}
		};
        // 打开弹窗前重置数据
        const resetFormDialog = () => {
            mainData.signItemOperaObj = {
                isEdit: false,
                isReadonly: false,
            };
        };
        // 刷新页面数据
        const readloadData = () => {
            console.log('readloadData');
            searchList();
        };
		// 单例操作-编辑
		const clickEditListItem = (item) => {
            resetFormDialog();
            mainData.signItemOperaObj.isEdit = true;
            exampleItemDialogRef.value.openDialog(JSON.parse(JSON.stringify(item)));
		};
		// 单例操作-详情
		const clickDetaListItem = (item) => {
            resetFormDialog();
            mainData.signItemOperaObj.isReadonly = true;
            exampleItemDialogRef.value.openDialog(JSON.parse(JSON.stringify(item)));
		};
        // 单例操作-新增
        const clickAddNListItem = () => {
            resetFormDialog();
            exampleItemDialogRef.value.openDialog();
        };
        // 单例操作-删除-点击
        const clickDeleListItem = (item) => {
            ElMessageBox.confirm('确认关闭？', '提示').then(() => {
                sendDeleListItem(item);
                console.log(11);
            }).catch(() => {
                console.log(22);
            });
        };
        // 单例操作-删除-发送
        const sendDeleListItem = async (data) => {
            let res = await get(proxy.$Api('queryExampleList'), data);
            if (res) {
                ElMessage({
                    type: 'success',
                    message: '删除成功!'
                });
            }else {
                ElMessage({
                    type: 'error',
                    message: '删除失败!'
                });
            }
        };
		// 查询功能--页码变化
		const listPageChange = (index) => {
			mainData.pageData.pageCurrent = index;
            searchList();
		};
		// 查询功能--每页条数变化
		const listPageSizeChange = (pageSize) => {
			mainData.pageData.pageSize = pageSize;
            searchList();
		};
        // 挂载完成回调
		onMounted(() => {
			searchList();
		});
		return {
			...toRefs(mainData),
			
            searchList,
			resetSearch,
            listPageChange,
            listPageSizeChange,

			clickEditListItem,
			clickDeleListItem,
			clickDetaListItem,
            clickAddNListItem,

            readloadData,

            exampleItemDialogRef,
			
		};
	},
    methods: {
    },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>